<template>
  <div class="header">
    <div class="ad"><h1>广告位火热招租中</h1></div>
    <div class="btn" @click="logout">
      <span>{{ userName }}</span
      ><span>登出</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {};
  },
  props: {
    userName: {
      type: String,
    },
  },
  created() {},
  computed: {},
  methods: {
    logout() {
      this.$router.push("/login");
    },
  },
};
</script>
<style lang='less'  scoped>
.header {
  width: 100%;
  height: 50px;
  display: flex;
  background: linear-gradient(
    135deg,
    red,
    orange,
    yellow,
    rgba(4, 252, 4, 0.2),
    rgba(0, 183, 255, 0.2),
    rgba(232, 7, 253, 0.2),
    rgba(238, 6, 238, 0.2)
  );
  .ad {
    flex: 1;
    text-align: center;
    h1 {
      background: -webkit-linear-gradient(
        top,
        #ff0000,
        #00ff00
      ); 
      -webkit-background-clip: text; /*背景被裁剪到文字*/
      -webkit-text-fill-color: transparent; /*设置文字的填充颜色*/
    }
  }
  .btn {
    width: 50px;
    display: flex;
    flex-direction: column;
  }
}
</style>
